<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chatroom</title>
</head>
<body>
 
    <table align="center">
        <tr>
            <td>
                <label>username</label>
                <input type="text" id="username" placeholder="username"></input>
            </td>
        </tr>

        <tr>
            <td>
                <label>room</label>
                <input type="text" id="room"></input>
                <button id="connect">connect</button>
            </td>
        </tr>

        
        <tr>
            <td>
                <label>content:</label><br>
                <textarea disabled id="output" cols="50" rows="10"></textarea>
            </td>
        </tr>

        
        <tr>
            <td>
                <label>Input:</label><br>
                <textarea  id="input" cols="50" rows="3"></textarea>
            </td>
        </tr>
              
        <tr>
            <td>
                <button id="send">send</button> 
            </td>
        </tr>
    </table> 
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> -->
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
    <!-- <script src="/socket.io/socket.io.js"></script> -->
    <script src="./js/client.js"></script>
</body>
</html>